<template>
  <svg 
    class="icon"
    :class="`icon-${name}`"
    aria-hidden="true"
    viewBox="0 0 24 24"
  >
    <use :xlink:href="symbolId" />
  </svg>
</template>
 
<script>
export default {
  props: {
    name: {
      type: String,
      required: true
    },
    size: {
      type: [Number, String],
      default: 24
    },
    color: {
      type: String,
      default: 'currentColor'
    }
  },
  computed: {
    symbolId() {
      return `#icon-${this.name}`
    }
  }
}
</script>
 
<style scoped>
.icon {
  width: v-bind(size + 'px');
  height: v-bind(size + 'px');
  fill: v-bind(color);
}
 
/* 示例图标样式 */
.icon-magic {
  transform: rotate(15deg);
}
</style>